<template>
	<view class="admin-user-detail-container">
		<image class="admin-user-detail-image" src="../../static/logo.png" mode="widthFix"></image>
		<view class="admin-user-detail-body-container">
			<view class="admin-user-detail-body-part">
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">序号</view>：<view class="admin-user-detail-value">{{data.userInfo.id}}</view>
				</view>
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">用户名</view>：<view class="admin-user-detail-value">{{data.userInfo.username}}</view>
				</view>
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">昵称</view>：<input type="text" class="admin-user-detail-value" v-model="data.userInfo.nickname" />
				</view>
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">权限</view>：<picker class="admin-user-detail-value" mode="selector" :range="data.role" :value="data.userInfo.role" @change="changeRole">
						<view>{{data.role[data.userInfo.role]}}</view>
					</picker>
				</view>
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">个性签名</view>：<view class="admin-user-detail-value">{{data.userInfo.personality_front}}</view>
				</view>
			</view>
			<view class="admin-user-detail-body-part">
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">手机号</view>：<view class="admin-user-detail-value">{{data.userInfo.phone}}</view>
				</view>
				<view class="admin-user-detail-body-item">
					<view class="admin-user-detail-label">邮箱</view>：<view class="admin-user-detail-value">{{data.userInfo.email}}</view>
				</view>
			</view>
		</view>
		
		<button class="admin-user-detail-btn" @tap="sendFix">提交修改</button>
	</view>
</template>

<script>
	import global from "../../config/global.js"
	import {onMounted,reactive} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	export default {
		name:"my-info",
		setup(){
			let data = reactive({
				userInfo:{},
				role:['普通用户','管理员','超级管理员']
			})
			
			onLoad((e)=>{
				data.userInfo = JSON.parse(decodeURIComponent(e.userInfo))
			})
			
			function changeRole(e){
				data.userInfo.role = e.detail.value
			}
			
			function sendFix(){
				uni.request({
					url:global.BASE_URL+'/user/changerole',
					method:"POST",
					data:{
						id:data.userInfo.id,
						nickname:data.userInfo.nickname,
						role:parseInt(data.userInfo.role) 
					},
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							uni.navigateBack();
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
			
			return {
				data,
				changeRole,
				sendFix
			}
		}
	}
</script>

<style scoped>
	.admin-user-detail-container{
		width: 750rpx;
	}
	
	.admin-user-detail-image{
		width: 170rpx;
		margin: 50rpx 280rpx 0rpx 280rpx;
		border-radius: 600rpx;
		border: 10rpx solid #9BCDD2;
	}
	
	.admin-user-detail-body-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
	}
	
	.admin-user-detail-body-item{
		position: relative;
		width: 650rpx;
		margin: 0rpx 25rpx;
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #cdcdcd;
		height: fit-content;
		/* align-items: center; */
	}
	
	.admin-user-detail-label{
		font-size: 36rpx;
		font-weight: bold;
		color: #515151;
		height: 50rpx;
		line-height: 50rpx;
		width: 150rpx;
		margin: 0rpx 5rpx;
		text-align-last:justify;
		text-align:justify;
		text-justify:distribute-all-lines;
	}
	
	.admin-user-detail-value{
		font-size: 30rpx;
		color: #515151;
		text-align: left;
		min-height: 50rpx;
		line-height: 50rpx;
		width: 470rpx;
		margin: 0rpx 5rpx;
	}
	
	.admin-user-detail-body-part{
		margin: 40rpx 0rpx;
	}
	
	.admin-user-detail-body-image{
		width: 50rpx;
		position: absolute;
		right: 10rpx;
	}
	
	.admin-user-detail-btn{
		width: 400rpx;
		padding: 0rpx 25rpx;
		margin: 10rpx 175rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 35rpx;
	}
</style>
